<template>
  <div>
    <div style="position: relative">
      <el-page-header @back="toBack" :content="detailObj.deviceName + ' 详情'">
      </el-page-header>
    </div>
    <div v-loading="pageLoading">
      <div style="margin-top: 12px">
        <el-card shadow="never" class="box-card flex-sub">
          <el-descriptions title="设备基本信息" direction="vertical" :column="11" border>
            <el-descriptions-item label="设备编码">{{
              deviceDetail.deviceSource
            }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{
              deviceDetail.deviceName
            }}</el-descriptions-item>
            <el-descriptions-item label="设备类型">
              {{ detailObj.deviceTypeStr }}
            </el-descriptions-item>

            <el-descriptions-item label="设备使用情况">
              <el-tag
                size="small"
                :style="deviceDetail.status | constantKeyTagStyleObj('DEVICE_STATUS')"
              >
                {{ deviceDetail.status | constantKeyValue("DEVICE_STATUS") }}
              </el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="设备运行状态">
              <el-tag
                size="small"
                :style="
                  deviceDetail.deviceRunningState
                    | constantKeyTagStyleObj('DEVICE_RUNNING_STATE')
                "
              >
                {{
                  deviceDetail.deviceRunningState
                    | constantKeyValue("DEVICE_RUNNING_STATE")
                }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="设备型号">{{
              deviceDetail.deviceModel
            }}</el-descriptions-item>
            <el-descriptions-item label="厂家">{{
              deviceDetail.manufactor
            }}</el-descriptions-item>

            <el-descriptions-item label="是否激活">
              {{ deviceDetail.isActive == 1 ? "已激活" : "未激活" }}
            </el-descriptions-item>

            <el-descriptions-item label="设备所在位置">{{
              deviceDetail.deviceLocation
            }}</el-descriptions-item>

            <el-descriptions-item label="所属网格">{{
              deviceDetail.gridMountFullPathText
            }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{
              deviceDetail.createdTime
            }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </div>

      <div style="margin-top: 12px; padding-bottom: 12px">
        <el-card shadow="never" class="box-card flex-sub">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="预警日历" name="first"></el-tab-pane>
            <el-tab-pane label="数据图表" name="second"></el-tab-pane>
            <el-tab-pane label="数据日志" name="third">
              <data-log
                :dataLogList="dataLogList"
                :id="detailObj.id"
                v-if="activeName == 'third'"
              ></data-log>
              <!-- <data-diary :dataDiaryList="dataDiaryList" :id="id"></data-diary> -->
            </el-tab-pane>
            <el-tab-pane label="生命周期" name="fourth"></el-tab-pane>
            <el-tab-pane label="变更记录" name="fifth"></el-tab-pane>
          </el-tabs>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import dataMonitor from "@/api/data-monitor";
import DataLog from "./DataLog";
export default {
  name: "Detail",
  components: {
    DataLog,
  },
  props: {
    detailObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      deviceDetail: {},
      activeName: "third",
      pageLoading: false,
      dataLogList: [],
    };
  },
  mounted() {
    this.getDeviceDetail();
  },
  methods: {
    toBack() {
      this.$emit("back");
    },
    getDeviceDetail() {
      this.pageLoading = true;
      dataMonitor.getSmokeDeviceDetail({ id: this.detailObj.id }).then((res) => {
        this.deviceDetail = res.data.data;
        this.dataLogList = this.deviceDetail.equipmentMonitorLogList;
        this.pageLoading = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../../styles/part-custom";
/deep/ .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-weight: normal;
  line-height: 1.5;
}
/deep/ .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid #e6ebf5;
  padding: 10px 5px;
}
</style>
